<template>
  <van-tabbar v-model="select" active-color="#f00" inactive-color="#000" @change="changeTabbar">
    <van-tabbar-item icon-prefix="iconfont" icon="shouye">首页</van-tabbar-item>
    <van-tabbar-item icon-prefix="iconfont" icon="icon">分类</van-tabbar-item>
    <van-tabbar-item icon-prefix="iconfont" icon="shouye2" :badge="badge">购物车</van-tabbar-item>
    <van-tabbar-item icon-prefix="iconfont" icon="shouye1">我的</van-tabbar-item>
  </van-tabbar>
</template>

<script>
export default {
  props: ['active'],
  data: function () {
    return {
      select: 0,
      badge:this.$store.state.pNum
    }
  },
  mounted() {
    // 由父组件给tabbar子组件绑定属性:[0,1,2,3] tabbar接收父组件传过来的值后给自己的select设置 tabbar的v-model选中
    this.select=this.active;
  },
  methods: {
    //使用子组件向父组件传值，再来select接收active
    changeTabbar(index) {
      switch (index) {
        case 0:
          this.$router.push('./').catch(() => { });
          break;
        case 1:
          this.$router.push('./category').catch(() => { });
          break;
        case 2:
          this.$router.push('./cart').catch(() => { });
          break;
        case 3:
          this.$router.push('./me').catch(() => { });
          break;
        default:
          break;
      }
    }
  }
};
</script>

<style lang="scss" scoped>
</style>
